<template>
  <div title="列表" class="tlbr-btn hm" :class="{ active: !!listType }">
    <div
      class="tlbr-btn__icon"
      v-html="listMap.get(listType || 'ordered')"
    ></div>
    <svg
      width="4"
      height="4"
      viewBox="0 0 4 4"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="tlbr-btn__dot"
    >
      <path d="M4 0V4H0L4 0Z" fill="#222222"></path>
    </svg>
    <div class="tlbr-btn__more">
      <div class="tlbr-btn__more__tooltip">
        <ul class="bre-toolbar__optlist icons">
          <li
            class="bre-toolbar__optbtn"
            v-for="item in listTypeList"
            :key="item.type"
            @click="handleClick(item)"
          >
            <div
              class="bre-toolbar__optbtn__icon"
              v-html="listMap.get(item.type)"
            ></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, inject, shallowRef, computed } from 'vue'
import Quill from 'quill'
const QuillEditor = inject('QuillEditor', shallowRef<Quill>())
const formatMap = inject('formatMap', ref<Record<string, any>>({}))
const getSelectionFormat = inject('getSelectionFormat', () => {})
const listType = computed(() => {
  return formatMap.value.list
})
const bulletSvg = `
<svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M5 7.5C5.55228 7.5 6 7.05228 6 6.5C6 5.94772 5.55228 5.5 5 5.5C4.44772 5.5 4 5.94772 4 6.5C4 7.05228 4.44772 7.5 5 7.5ZM8.6 5.80005C8.26863 5.80005 8 6.06868 8 6.40005C8 6.73142 8.26863 7.00005 8.6 7.00005H18.4C18.7314 7.00005 19 6.73142 19 6.40005C19 6.06868 18.7314 5.80005 18.4 5.80005H8.6ZM8.6 18.2C8.26863 18.2 8 18.4686 8 18.8C8 19.1313 8.26863 19.4 8.6 19.4H18.4C18.7314 19.4 19 19.1313 19 18.8C19 18.4686 18.7314 18.2 18.4 18.2H8.6ZM8 12.6C8 12.2686 8.26863 12 8.6 12H18.4C18.7314 12 19 12.2686 19 12.6C19 12.9314 18.7314 13.2 18.4 13.2H8.6C8.26863 13.2 8 12.9314 8 12.6ZM6 12.5C6 13.0523 5.55228 13.5 5 13.5C4.44772 13.5 4 13.0523 4 12.5C4 11.9477 4.44772 11.5 5 11.5C5.55228 11.5 6 11.9477 6 12.5ZM5 19.7C5.55228 19.7 6 19.2523 6 18.7C6 18.1477 5.55228 17.7 5 17.7C4.44772 17.7 4 18.1477 4 18.7C4 19.2523 4.44772 19.7 5 19.7Z"
      fill="currentColor"
    ></path>
  </svg>
`
const orderedSvg = `
<svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M8 6.40005C8 6.06868 8.26863 5.80005 8.6 5.80005H18.4C18.7314 5.80005 19 6.06868 19 6.40005C19 6.73142 18.7314 7.00005 18.4 7.00005H8.6C8.26863 7.00005 8 6.73142 8 6.40005ZM8 18.8C8 18.4686 8.26863 18.2 8.6 18.2H18.4C18.7314 18.2 19 18.4686 19 18.8C19 19.1313 18.7314 19.4 18.4 19.4H8.6C8.26863 19.4 8 19.1313 8 18.8ZM8.6 12C8.26863 12 8 12.2686 8 12.6C8 12.9314 8.26863 13.2 8.6 13.2H18.4C18.7314 13.2 19 12.9314 19 12.6C19 12.2686 18.7314 12 18.4 12H8.6Z"
      fill="currentColor"
    ></path>
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M5.17468 4.32996H4.59205L4.56254 4.3607C4.45041 4.4775 4.30836 4.58702 4.1343 4.69355C3.96083 4.78975 3.79962 4.85564 3.65042 4.89294L3.57468 4.91188V5.70281L3.70234 5.66605C3.96549 5.5903 4.19432 5.48313 4.38968 5.34365V8.09996H5.17468V4.32996Z"
      fill="currentColor"
    ></path>
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M4.53507 10.955C4.72676 10.955 4.8528 10.9971 4.93207 11.0683C5.00601 11.1391 5.05507 11.2541 5.05507 11.43C5.05507 11.6006 4.98763 11.7673 4.8464 11.9273C4.75264 12.0255 4.59897 12.1556 4.37322 12.3127C3.95918 12.597 3.67446 12.8232 3.53494 12.9839C3.27822 13.273 3.15507 13.6118 3.15507 14V14.1H5.84507V13.385H4.16675C4.27005 13.2585 4.44589 13.1089 4.70581 12.938C5.05573 12.703 5.31452 12.5075 5.46318 12.3482L5.46432 12.3469C5.70804 12.0767 5.84007 11.7737 5.84007 11.435C5.84007 11.0887 5.71954 10.8061 5.47733 10.586L5.4765 10.5852C5.23053 10.3666 4.92074 10.26 4.55507 10.26C4.14524 10.26 3.80739 10.3995 3.55151 10.6822C3.30148 10.9489 3.18031 11.2945 3.17507 11.7137L3.17381 11.815H3.95656L3.96 11.7185C3.96967 11.4479 4.02762 11.2577 4.11874 11.1418L4.12071 11.1391C4.20828 11.0197 4.34032 10.955 4.53507 10.955Z"
      fill="currentColor"
    ></path>
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M5.14925 17.4238L5.02756 17.2195C5.00828 17.156 4.97741 17.1071 4.93809 17.0693C4.85808 17.0017 4.73086 16.96 4.54007 16.96C4.34541 16.96 4.21302 17.0061 4.12249 17.0888L4.12093 17.0902C4.0262 17.1731 3.96312 17.3055 3.94464 17.5042L3.9362 17.595H3.16139L3.17041 17.4867C3.20211 17.1062 3.34105 16.7996 3.60482 16.5792C3.85176 16.3602 4.16681 16.26 4.53507 16.26C4.91024 16.26 5.22957 16.3486 5.47232 16.5417L5.4732 16.5424C5.7138 16.7382 5.83507 17.0079 5.83507 17.345C5.83507 17.5577 5.78019 17.7427 5.66514 17.8932C5.62293 17.9484 5.5735 17.9978 5.51733 18.0417L5.46569 17.955"
      fill="currentColor"
    ></path>
    <path
      d="M5.70062 18.3494L5.51733 18.0417L5.46569 17.955"
      fill="currentColor"
    ></path>
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M5.70062 18.3494C5.83914 18.5058 5.90507 18.7055 5.90507 18.935C5.90507 19.2912 5.7789 19.5893 5.52679 19.8194C5.26511 20.0539 4.9248 20.17 4.51507 20.17C4.12792 20.17 3.80304 20.0703 3.55565 19.8614C3.28025 19.6301 3.13183 19.2922 3.10035 18.8724L3.09229 18.765H3.89081L3.89497 18.8606C3.90418 19.0725 3.96756 19.2235 4.08167 19.3254L4.08277 19.3264C4.18629 19.4216 4.32572 19.475 4.51007 19.475C4.71486 19.475 4.86768 19.4164 4.97505 19.3136C5.07099 19.2173 5.12007 19.1029 5.12007 18.96C5.12007 18.7768 5.06294 18.6596 4.973 18.5884L4.97105 18.5868C4.87696 18.5084 4.72966 18.465 4.51007 18.465H4.16007V17.825H4.51007C4.70694 17.825 4.84047 17.7827 4.92584 17.7133C5.00301 17.6467 5.05007 17.5428 5.05007 17.39C5.05007 17.3238 5.0421 17.2674 5.02756 17.2195L5.14925 17.4238M5.69973 18.3484C5.62043 18.2553 5.51857 18.1803 5.39928 18.1204C5.44134 18.0965 5.48083 18.0702 5.51733 18.0417L5.69973 18.3484Z"
      fill="currentColor"
    ></path>
  </svg>
`
const listTypeList = ref<{ type: 'ordered' | 'bullet'; icon: string }[]>([
  { type: 'ordered', icon: orderedSvg },
  { type: 'bullet', icon: bulletSvg },
])
const listMap = new Map<string, string>()
listTypeList.value.forEach((item) => {
  listMap.set(item.type, item.icon)
})
const handleClick = (item: { type: 'ordered' | 'bullet' }) => {
  QuillEditor.value!.focus()
  //   获取选择的format
  const format = QuillEditor.value!.getFormat()
  if (format.list === item.type) {
    QuillEditor.value!.format('list', null)
  } else {
    QuillEditor.value!.format('list', item.type)
  }
  getSelectionFormat()
}
</script>
<style lang="scss" scoped></style>
